<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator=">" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">系统管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">鱼池管理</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">
      <div class="flex-bet">
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="">
            <el-cascader v-if="userType == 0" v-model="searchForm.companyId" placeholder="请选择公司名称" :options="companyArray" :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childList',
              }" style="width: 150px" @change="changeTreeItem" clearable></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.baseId" placeholder="请选择基地名称" @change="onSubmit" style="width: 150px !important" clearable>
              <el-option v-for="item in baseArray" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="">
            <el-input maxlength="50" placeholder="请输入鱼池编码" v-model="searchForm.fishpondCode" style="width:150px"
              clearable></el-input>
          </el-form-item> -->
          <el-form-item label="">
            <el-input maxlength="50" placeholder="请输入鱼池名称" v-model="searchForm.name" style="width: 150px" clearable></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input maxlength="50" placeholder="请输入排名称" v-model="searchForm.row" style="width: 150px" clearable></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="searchForm.state" placeholder="请选择鱼池状态" @change="onSubmit" style="width: 150px !important" clearable>
              <el-option label="正常" value="0"></el-option>
              <el-option label="投食" value="1"></el-option>
              <el-option label="停食" value="2"></el-option>
              <el-option label="消毒" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div v-allow="'090402'" class="search-btn" @click="onSubmit"></div>
          </el-form-item>
          <el-form-item>
            <div v-allow="'090402'" class="reset-btn" @click="resetForm"></div>
          </el-form-item>
        </el-form>
        <div class="left-title flex">
          <div style="margin-top: 0rem !important" class="add-btn" v-allow="'090401'" @click="handleAdd()">
            添加鱼池
          </div>
        </div>
        <div class="col_set" @mouseenter="onEnter" style="position: absolute; left: 105rem; cursor: pointer">
          <i class="el-icon-setting" style="font-size: 24px; color: #409eff"></i>
        </div>

        <div class="col_div" @mouseleave="onLeave" v-show="colShow == 1">
          <div class="col_content">
            <span style="
                font-size: 1.2rem;
                font-weight: bold;
                text-align: center;
                margin-left: 1rem;
                margin-top: 1rem;
                height: 3rem;
                line-height: 3rem;
                border-bottom: 0.1rem solid black;
              ">可拖动改变列表顺序</span>
            <draggable v-model="tableCols" animation="1000" @start="onStart" @end="onEnd">
              <transition-group>
                <div style="
                    margin-left: 2rem;
                    width: 15rem;
                    margin-top: 1rem;
                    cursor: pointer;
                  " class="item" v-for="element in tableCols" :key="element.prop || element.slot">
                  <i class="el-icon-menu tip" style="font-size: 16px; color: #999999"></i>
                  {{ element.label }}
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <NxTable :table-cols="tableCols" :table-data="tableData" :pag-ination="pagination" class="table-wrap" @refresh="refresh">
        <template slot="state" slot-scope="scope">
          <span v-if="scope.row.state == 0">正常</span>
          <span v-if="scope.row.state == 1">投食</span>
          <span v-if="scope.row.state == 2">停食</span>
          <span v-if="scope.row.state == 3">消毒</span>
        </template>
        <template slot="operation" slot-scope="scope">
          <span v-allow="'090405'" @click="handleChart(scope.row)" class="nx-btn nx-edit">鱼池投料</span>
          <span v-allow="'090406'" @click="handleHistory(scope.row)" class="nx-btn nx-edit">历史记录</span>
          <span v-allow="'090407'" @click="handleDetail(scope.row)" class="nx-btn nx-edit">详情</span>
          <span v-allow="'090403'" @click="handleEdit(scope.row)" class="nx-btn nx-edit">编辑</span>
          <span v-allow="'090404'" @click="handleDelete(scope.row)" class="nx-btn nx-del">删除</span>
        </template>
      </NxTable>
    </div>
    <AddEditDialog :addEditId="addEditId" :addEditStatus="addEditStatus" :addEditIsDialog="addEditIsDialog">
    </AddEditDialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import NxTable from '@/components/NxTable.vue'
import AddEditDialog from './components/addEditDialog.vue'
import { Page } from '@/utils/pagination'
import { getObjFishpondList, delObjFishpond } from '@/api/fishpond'
// import { getCompanyInfoTree } from '@/api/company'
// import { getSysCompanyBases } from '@/api/system'
import mixin from '@/api/CompanyInfoTree.js'

export default {
  mixins: [mixin],
  components: {
    NxTable,
    AddEditDialog,
    draggable
  },
  // 表格数据
  data() {
    return {
      colShow: '',
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        companyId: 1,
        baseId: 1,
        name: '',
        state: '',
        row: ''
      },

      // 表格字段
      tableCols: [
        {
          label: '公司名称',
          prop: 'companyName',
          align: 'center',
          width: 250
        },
        {
          label: '基地名称',
          prop: 'baseName',
          align: 'center',
          width: 150
        },
        // {
        //   label: '部门编号',
        //   prop: 'cdepcode',
        //   align: 'center',
        //   width: 150
        // },
        // {
        //   label: "部门班组",
        //   prop: "deptTeam",
        //   align: "center",
        //   width: 150,
        // },
        // {
        //   label: "班组名称",
        //   prop: "deptTeamName",
        //   align: "center",
        //   width: 150,
        // },
        {
          label: '鱼池编号',
          prop: 'code',
          align: 'center',
          width: 150
        },
        {
          label: '鱼池名称',
          prop: 'name',
          align: 'center',
          width: 150
        },
        {
          label: '鱼池状态',
          slot: 'state',
          align: 'center',
          width: 150
        },
        {
          label: '鱼池面积（平方米）',
          prop: 'sqn',
          align: 'center',
          width: 170
        },
        {
          label: '日投喂量(公斤)',
          prop: 'value',
          align: 'center',
          width: 170
        },

        {
          label: '鱼池容积（立方米）',
          prop: 'ste',
          align: 'center',
          width: 170
        },
        {
          label: '排',
          prop: 'row',
          align: 'center'
        },
        {
          label: '创建修改人员名称',
          prop: 'updateName',
          align: 'center',
          width: 150
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: 300,
          fixed: 'right'
        }
      ],
      tableData: [],
      pagination: new Page(),
      crumbsStatus: '', // 三级面包屑名称
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      addEditStatus: 'add',
      addEditId: '', // 添加编辑rowid
      baseArray: [], // 基地集合
      companyArray: [], // 公司集合
      userType: '' // 用户类型（0超级管理员，1公司管理员，2公司员工）
    }
  },
  // 初始化加载
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.getCompanyInfoTree()
    this.getList()
    this.getSysCompanyBases()
  },
  // 自定义方法
  methods: {
    // 鼠标移入时显示
    onEnter() {
      this.colShow = 1
    },
    // 鼠标移出事件
    onLeave() {
      this.colShow = 0
    },
    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
      console.log(this.myArray)
    },
    handleDetail(row) {
      this.$router.push({
        path: `/fishpond/FishpondDetail?id=` + row.id + `&baseId=` + row.baseId + `&companyId=` + row.companyId
      })
    },
    handleHistory(row) {
      this.$router.push({
        path: `/breeding/history?id=` + row.id
      })
    },
    handleChart(row) {
      this.$router.push({
        path: `/breeding/chart?id=` + row.id
      })
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1
      this.getList()
    },
    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum
      this.searchForm.pageSize = val.pageSize
      this.getList()
    },
    // 重置
    resetForm() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        companyId: '',
        baseId: '',
        fishpondName: '',
        code: '',
        status: ''
      }

      this.onSubmit()
    },
    // 查询列表
    getList() {
      getObjFishpondList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.pagination.count = res.data.total
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delObjFishpond({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg
              })
              this.getList()
            }
          })
        })
        .catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 添加
    handleAdd() {
      this.addEditId = ''
      this.addEditStatus = 'add'
      this.addEditIsDialog = true
    },
    // 编辑
    handleEdit(row) {
      this.addEditId = row.id + ''
      this.addEditStatus = 'edit'
      this.addEditIsDialog = true
    },
    // 编辑添加取消关闭
    closeAddEdit() {
      this.addEditIsDialog = false
    },
    // 面包屑
    crumbsClick() {
      this.typeDialog = false
    },
    // 启用、禁用
    handleStatus(row) {
      openOrCloseSysUser({ id: row.id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          this.getList()
        }
      })
    },
    // 用户类型切换
    typeChange() {
      this.searchForm.companyId = ''
      this.companyArray = []

      this.searchForm.roleId = ''
      this.baseArray = []

      // 获取公司列表
      this.getCompanyInfoTree()

      // 查询
      this.onSubmit()
    },
    // 获取公司列表
    // getCompanyInfoTree() {
    //   if (!this.searchForm.userType) {
    //     return
    //   }

    //   if (this.searchForm.userType == 0) {
    //     // 超级管理员，公司只有一个总公司
    //     this.companyArray = [
    //       {
    //         id: 0,
    //         name: '总公司',
    //         parentId: 0,
    //       },
    //     ]
    //   } else {
    //     getCompanyInfoTree({ id: 0 }).then((res) => {
    //       if (res.code == 200) {
    //         this.companyArray = res.data
    //       }
    //     })
    //   }
    // },
    // 公司下拉切换
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
      } else {
        this.searchForm.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseArray = []

      this.getList()

      // 获取角色列表
      this.getSysCompanyBases()
    }
    // 获取角色列表
    // getSysCompanyBases() {
    //   if (
    //     this.searchForm.companyId === '' ||
    //     this.searchForm.companyId == null
    //   ) {
    //     return
    //   }

    //   getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
    //     if (res.code == 200) {
    //       this.baseArray = res.data
    //     }
    //   })
    // },
  }
}
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;

  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;

    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }

    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}

.col_div {
  position: absolute;
  z-index: 99999;
  top: 10.5rem;
  left: 107.5rem;
  width: 13rem;
  height: 30rem;
  border: 1rem !important;
  border-radius: 3px;
  border-color: #48a0f8 !important;
  // overflow: hidden;
  // border-color: skyblue !important;
  background-color: #fff;
  box-shadow: 0 0px 3px inset rgba(85, 172, 244, 0.818);
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

/*滚动条整体样式*/
::-webkit-scrollbar {
  display: none;
  width: 4px;
  height: 10px;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #48a0f8;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

// 鼠标移入清除省略号
.hover_title[data-title] {
  position: relative;

  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }

  // 背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    position: absolute;
    padding: 1px 10px;
    left: 60px;
    bottom: -2.8em;
    height: 2rem;
    line-height: 2rem;
    // right: 0.5rem;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
}
</style>
